<template>
  <div>
    <el-container
      class="main-box"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <el-header class="main-title">
        <div class="p-logo"></div>
        <div class="p-name">{{ $t("platformName") }}</div>
        <div class="p-lang">
          <el-link
            :type="langType(item.key)"
            class="margin-right"
            v-for="item in $t('languages')"
            :key="item.key"
            @click="toggleLanguage(item.key)"
            >{{ item.label }}</el-link
          >
        </div>
      </el-header>
      <el-main class="overflow-hidden">
        <el-row>
          <el-col class="ll">
            <div class="form-box">
              <component
                :is="pageType"
                class="form-box"
                :loading="loading"
                @loadingChange="loadingChange"
                @toChangePageType="changePageType"
              ></component>
              <el-row>
                <el-col class="align-center" v-if="pageType == 'Login'">
                  <el-link type="info" :underline="false">{{
                    $t("public.noAccount")
                  }}</el-link>
                  <el-link type="primary" @click="changePageType('Register')">{{
                    $t("public.toRegister")
                  }}</el-link>
                </el-col>
                <el-col class="align-center" v-if="pageType == 'Register'">
                  <el-link type="info" :underline="false">{{
                    $t("public.hasAccount")
                  }}</el-link>
                  <el-link type="primary" @click="changePageType('Login')">{{
                    $t("public.toLogin")
                  }}</el-link>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col class="lr">
            <div class="img-container">
              <el-image
                style="width: 100%; height: 100%"
                src="https://s1.obs.idosp.cn/V3/images/login/login.gif"
                fit="scale-down"
              ></el-image>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <Footer />
  </div>
</template>

<script>
import Login from "./login/Login.vue";
import Register from "./register/Register.vue";
import Footer from "./footer/Footer.vue";
export default {
  name: "NotIE",
  components: {
    Login,
    Register,
    Footer,
  },
  data() {
    return {
      loading: false,
      pageType: "Login",
    };
  },
  computed: {},
  methods: {
    changePageType(type) {
      this.pageType = type;
    },
    loadingChange(loading) {
      this.loading = loading;
    },
    langType(type) {
      let res = "info";
      if (type === this.$i18n.locale) {
        res = "primary";
      }
      return res;
    },
    toggleLanguage(lang) {
      this.$i18n.locale = lang; //设置中英文模式
      localStorage.setItem("language", lang);
      location.reload();
    },
  },
  created() {
    // 处理语言
    let language = localStorage.getItem('language') || 'zh';
    if (language) {
      localStorage.setItem("language", language);
      this.$i18n.locale = language;
    }
  },
};
</script>